<template>
    <div>
        <!-- :dialog-style="{ top: '40px' }" -->
        <a-modal
            
            title="移交企业材料"
            :visible="visible"
            @ok="handleOk"
            @cancel="visible = false"
            :width="700"
            :footer="null"
        >
            <commpVxeTable
                :key="dataTableKey"
                :adaptiveHeight="true"
                :config="dataTableConfig" 
                :columns="columnsVxe" 
                :formItem="formItem"
                :isCanWrap="true"
                ref="acceptanceRegistrationRef"
            >
                <template v-slot:externalOperations="{data}">
                    <vxe-form-item>
                        <template>
                            <span style="color: #ed5565;" >（如果没有选择材料就打包下载全部，压缩包中存在满意度调查二维码）</span>
                            <a-button type="primary" class="blue-btn" icon="download" @click="zipDownload">打包下载</a-button>
                        </template>
                    </vxe-form-item>
                </template>
                <template v-slot:clmc_name="{row}" >
                    <div>{{ row.clmc }}</div>
                    <span v-if="row.clmc == '满意度调查问卷二维码'" style="color: #ed5565;" >(如果未次会议已经填写，扫码后可以直接载满意度调查问卷)</span>
                </template>
                <template v-slot:wjList_name="{row}" data-desc="自定操作栏">
                    <div v-for="(item,index) in row.wjList" :key="index" style="margin: 3px;border-radius: 15px;padding: 3px;text-align: left">
                        <a-checkbox @change="$event=>{checkboxChange($event,item)}"></a-checkbox>
                        <span style="padding-left: 5px">{{ item.fwjxsmc+item.fwjlx }}</span>
                        <a-icon type="download" style="display: inline-block;margin-left: 5px;font-size:16px;color: #5ca3e5;" @click.top.prevent="downloadFiles(item)"/>
                    </div>
                </template>
            </commpVxeTable>
            <template slot="footer">
                <div style="display: flex;justify-content: center;">
                    <a-button @click="handleOk" type="primary">关闭</a-button>
                </div>
            </template>
        </a-modal>
    </div>
</template>
<script>
import {
    spcySqsxWjjlgetLocalFileById,
    spcygxZipYsQyCl,
} from './service/index'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import assessCheckApi from './service/api'
import blobType from '@/common/blobType'
export default {
    components:{
        commpVxeTable
    },
    props:{

    },
    data(){
        return{
            currentData:{},
            visible:false,
            chapterList:[],
            headList:[],
            spinning:false,
            spinningKey:null,
            dataTableConfig: {
              api: assessCheckApi.spcyqueryWjMlBySchyQy,
              rowId: 'id',
              height:window.innerHeight - 260,
              autoHidden:true,
              pageSize:100000,
              paramet:{}
          },
          formItem: [],
          dataTableKey:null,
          columnsVxe: [{
                title: '材料目录',
                field: 'clmc',
                slots: {
                    // 使用插槽模板渲染
                    default: 'clmc_name',
                },
                width:200,
            },{
                title: '材料',
                field: 'wjList',
                slots: {
                    // 使用插槽模板渲染
                    default: 'wjList_name',
                },
            }],
            selectId:[],
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(val){
            this.selectId = []
            this.currentData = val
            this.dataTableConfig.paramet = {
                sqsxid:val.sqsxid
            }
            this.dataTableKey = Date.now()
        },
        checkboxChange(val,item){
            if(val.target.checked){
                this.selectId.push(item.id)
            }else{
                this.selectId.splice(this.selectId.indexOf(item.id),1)
            }
            //console.log(this.selectId)
        },
        downloadFiles(val){//下载
            var that = this
            
            var fileName = val.fwjxsmc?val.fwjxsmc:val.fwjccmc
            let param = { fywflcode:'001002',id:val.id,sqsxid:this.currentData.sqsxid}
            spcySqsxWjjlgetLocalFileById(param).then((data) => {
                if (!data) {
                    that.$message.warning('文件下载失败')
                return
                }
                    let url = window.URL.createObjectURL(new Blob([data], { type: blobType.type[blobType.suffix.indexOf(val.fwjlx)] }))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', fileName + val.fwjlx)
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link) //下载完成移除元素
                    window.URL.revokeObjectURL(url) //释放掉blob对象
            })
        },
        zipDownload(){//打包下载
            var fileName = '企业材料'
            spcygxZipYsQyCl({sqsxid:this.currentData.sqsxid,wjids:this.selectId.join(',')}).then((data) => {
                if (!data) {
                    that.$message.warning('文件下载失败')
                return
                }
                    let url = window.URL.createObjectURL(new Blob([data], { type: blobType.type[blobType.suffix.indexOf('.zip')] }))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', fileName + '.zip')
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link) //下载完成移除元素
                    window.URL.revokeObjectURL(url) //释放掉blob对象
            })
        },
        handleOk(){
            this.visible = false
        },
        
    }
}
</script>
<style lang="less">
.chapter-head-box{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    .chapter-head-for-v{
        width: 40%;
        display: flex;
        justify-content: center;
        padding: 5px 10px;
        border-bottom: 1px solid #d9d9d9;
        .fzjmc-text{
            flex: 1;
        }
    }
}

</style>